<template>
  <div class="personal">
    <div class="zuo">
      <el-card class="box-card ">
        <div slot="header" class="clearfix">
          <span>商户集合</span>
        </div>
        <!-- 显示信息部分 -->
        <div>
          <div class="qq">
            <span>商户编号</span>
            <span>{{ list.code }}</span>
          </div>
          <el-divider />
          <div class="qq">
            <span>商户名称</span>
            <span>{{ list.name }}</span>
          </div>
          <el-divider />
          <div class="qq">
            <span>商户别名</span>
            <span>list.companyAlias</span>
          </div>
          <el-divider />
          <div class="qq">
            <span>商户类型</span>
            <span>{{ list.type }}</span>
          </div>
          <el-divider />
          <div class="qq">
            <span>经营类型</span>
            <span>{{ list.businessType }}</span>
          </div>
          <el-divider />
          <div class="qq">
            <span>合同有效期</span>
            <span>{{ list.contractExpiry }}</span>
          </div>
          <el-divider />
          <div class="qq">
            <span>联系人姓名</span>
            <span>{{ list.contactName }}</span>
          </div>
          <el-divider />
          <div class="qq">
            <span>联系人手机号</span>
            <span>{{ list.contactMobile }}</span>
          </div>
          <el-divider />
          <div class="qq">
            <span>管理员姓名</span>
            <span>{{ list.adminName }}</span>
          </div>
          <el-divider />
          <div class="qq">
            <span>管理员姓名</span>
            <span>{{ list.adminMobile }}</span>
          </div>
          <el-divider />
          <div class="qq">
            <span>营业执照附件</span>
            <span>
              <div class="demo-image__preview">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="list.license"
                  :preview-src-list="srcList"
                />
              </div>
            </span>
          </div>
          <el-divider />
          <el-divider />
          <div class="qq">
            <span>身份证正面</span>
            <span>
              <div class="demo-image__preview">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="list.idCardFront"
                  :preview-src-list="srcList"
                />
              </div>
            </span>
          </div>
          <el-divider />
          <el-divider />
          <div class="qq">
            <span>身份证反面</span>
            <span>
              <div class="demo-image__preview">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="list.idCardBack"
                  :preview-src-list="srcList"
                />
              </div>
            </span>
          </div>
          <el-divider />
          <div class="qq">
            <span>审核状态</span>
            <span>
              {{ list.status === 1 ? '已通过' : list.status === 2 ? '审核中' : list.status === 3 ? '审核未通过': list.status === 0 ? '待审核': '未知状态' }}
            </span>
          </div>
          <el-divider />
        </div>
      </el-card>
    </div>

  </div>
</template>

<script>
import { getUserInfo } from '@/api/user'
export default {
  data() {
    return {
      list: [],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ]
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      const res = await getUserInfo()
      console.log(res)
      this.list = res.merchantDTOList[0]
    }
  }
}
</script>

<style lang="scss" scoped>
.zuo {
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
}

.img {
    border: 1px solid #fff;
    border-radius: 50%;
    margin-bottom: 10px;
}

.IMG {
    text-align: center;
}

.qq {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.imgs {
    width: 50px;
    height: 50px;
    border: 1px solid #fff;
    border-radius: 50%;
}

.enterprise {
    display: flex;
    width: 100%;
    height: 50px;
    justify-content: space-between;
    align-items: center;
    /* 垂直居中对齐 */
}
.clearfix {
    text-align: center;
}
</style>
